<template>
  <div class="pollution-source-popup">
    <div class="popup-header">
      <h3>{{ featureData.polluteName || featureData.name || '污染源信息' }}</h3>
      <!-- <div class="header-icon">
        <i class="el-icon-office-building"></i>
      </div> -->
    </div>

    <div class="popup-body">


      <div class="base-info-box">
        <div class="base-info-title">
          <div class="header-title">基本信息</div>
        </div>
        <div class="base-info-grid">
          <!-- <div class="base-info-item">
            <span class="base-info-label">企业名称</span>
            <span class="base-info-value">{{ featureData.polluteName }}</span>
          </div> -->
          <div class="base-info-item">
            <span class="base-info-label">行业类型</span>
            <span class="base-info-value">{{ featureData.industryTypeName }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">统一社会信用代码</span>
            <span class="base-info-value">{{ featureData.socialcode || featureData.socialCode || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">许可证编号</span>
            <span class="base-info-value">{{ featureData.outpermitnb || featureData.outPermitNb || '--' }}</span>
          </div>

          <div class="base-info-item">
            <span class="base-info-label">企业类型</span>
            <span class="base-info-value info-value" :class="getEnterpriseTypeClass(featureData.enterpriseType)">{{
              getEnterpriseTypeName(featureData.enterpriseType) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">企业状态</span>
            <span class="base-info-value status-badge" :class="getEnterpriseStatusClass(featureData.epStateCode)">{{
              getEnterpriseStatusName(featureData.epStateCode) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">经纬度</span>
            <span class="base-info-value">{{ featureData.longitude || featureData.lon || '--' }}, {{
              featureData.latitude || featureData.lat || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">受纳水体</span>
            <span class="base-info-value">{{ featureData.riverName || '--' }}</span>
          </div>
        </div>
        <div class="base-info-item-line margin-top-12">
          <span class="base-info-label-line">所在地址</span>
          <span class="base-info-value-line">{{ featureData.polluteAddress || '--' }}</span>
        </div>
      </div>



      <div class="base-info-box">
        <div class="base-info-title">
          <div class="header-title">分类信息</div>
        </div>
        <div class="base-info-grid">
          <div class="base-info-item">
            <span class="base-info-label">是否涉水污染源</span>
            <span class="base-info-value info-value" :class="getStatusClass(featureData.waterRelate)">{{
              getWaterRelateName(featureData.waterRelate) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">是否重点排污企业</span>
            <span class="base-info-value info-value" :class="getStatusClass(featureData.isGgarbageDisPlant)">{{
              getIsGgarbageDisPlantName(featureData.isGgarbageDisPlant) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">是否畜牧养殖</span>
            <span class="base-info-value info-value" :class="getStatusClass(featureData.isAnimalHusbandry)">{{
              getIsAnimalHusbandryName(featureData.isAnimalHusbandry) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">是否畜禽养殖</span>
            <span class="base-info-value info-value" :class="getStatusClass(featureData.isBeastsFarm)">{{
              getIsBeastsFarmName(featureData.isBeastsFarm) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">是否污普企业</span>
            <span class="base-info-value info-value" :class="getStatusClass(featureData.ifWuPuEnt)">{{
              getIfWuPuEntName(featureData.ifWuPuEnt) }}</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 定义 props
const props = defineProps({
  featureData: {
    type: Object,
    default: () => ({})
  }
});

// 数据映射
const waterRelateMap = {
  '1': '是',
  '0': '否'
};

const epStateCodeMap = {
  '0': '关闭',
  '1': '正常',
  '2': '注销',
  '3': '吊销',
  '4': '停产',
  '5': '搬迁',
  '6': '其他'
};

const enterpriseTypeMap = {
  '0': '工业源',
  '1': '农业源',
  '2': '生活源',
  '8': '工业园区',
  '9': '其他'
};

const yesNoMap = {
  '1': '是',
  '0': '否'
};

// 获取映射值的通用方法
const getMapValue = (map, key) => map[key] || '未知';

// 获取企业类型名称
const getEnterpriseTypeName = (type) => {
  return getMapValue(enterpriseTypeMap, type);
};

// 获取企业状态名称
const getEnterpriseStatusName = (status) => {
  return getMapValue(epStateCodeMap, status);
};

// 获取是否涉水污染源名称
const getWaterRelateName = (value) => {
  return getMapValue(waterRelateMap, value);
};

// 获取是否重点排污企业名称
const getIsGgarbageDisPlantName = (value) => {
  return getMapValue(yesNoMap, value);
};

// 获取是否畜牧养殖名称
const getIsAnimalHusbandryName = (value) => {
  return getMapValue(yesNoMap, value);
};

// 获取是否畜禽养殖名称
const getIsBeastsFarmName = (value) => {
  return getMapValue(yesNoMap, value);
};

// 获取是否污普企业名称
const getIfWuPuEntName = (value) => {
  return getMapValue(yesNoMap, value);
};

// 获取企业类型样式类
const getEnterpriseTypeClass = (type) => {
  const classMap = {
    '0': 'industrial',
    '1': 'agricultural',
    '2': 'domestic',
    '8': 'industrial-park',
    '9': 'other'
  };
  return classMap[type] || 'unknown';
};

// 获取企业状态样式类
const getEnterpriseStatusClass = (status) => {
  const classMap = {
    '0': 'closed',
    '1': 'normal',
    '2': 'cancelled',
    '3': 'revoked',
    '4': 'suspended',
    '5': 'relocated',
    '6': 'other'
  };
  return classMap[status] || 'unknown';
};

// 获取是/否状态样式类
const getStatusClass = (value) => {
  return value === '1' ? 'status-yes' : value === '0' ? 'status-no' : 'status-unknown';
};

// 关闭弹窗方法
const closePopup = () => {
  // 如果需要触发关闭事件，可以使用 emit
  // const emit = defineEmits(['close']);
  // emit('close');
};
</script>

<style scoped>
.pollution-source-popup {
max-width: 100%;
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 设置容器高度为视口高度 */
  height: 80vh;
  /* 确保在不同设备上正常显示 */
  position: fixed;
}

/* 触摸滚动通用样式 */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 隐藏滚动条但保持功能 */
.touch-scroll::-webkit-scrollbar {
  display: none;
}


.popup-header {
 font-size: 18px;
  font-weight: 600;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.popup-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.header-icon {
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.popup-body {
padding: 15px;
/* 启用垂直滚动 */
  overflow-y: auto;
  /* 占满剩余空间 */
  flex: 1;
  /* 优化iOS滚动体验 */
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* 隐藏滚动条但保持功能 */
.body::-webkit-scrollbar {
  display: none;
}


/* 基础信息卡片样式 */
.base-info-box {
  background: white;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.base-info-box:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* 标题区域样式 */
.base-info-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.sample-time {
  font-size: 14px;
  color: #7f8c8d;
  background: #ecf0f1;
  padding: 4px 12px;
  border-radius: 20px;
}

/* 信息网格布局 */
.base-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* 信息项样式 */
.base-info-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.base-info-item:hover {
  background: linear-gradient(135deg, #f0f2f5, #dde1e6);
}

/* 标签和值的样式 */
.base-info-label {
  font-weight: 500;
  color: #7f8c8d;
  font-size: 12px;
}

.base-info-value {
  margin-top: 4px;
  font-weight: 700;
  color: #2c3e50;
  font-size: 14px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
  height: 100%;
}

.margin-top-12 {
  margin-top: 18px;
}

.base-info-item-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.base-info-item-line:hover {
  background: linear-gradient(135deg, #f0f2f5, #dde1e6);
}

/* 标签和值的样式 */
.base-info-label-line {
  font-weight: 500;
  color: #7f8c8d;
  font-size: 12px;
}

.base-info-value-line {
  margin-left: 12px;
  font-weight: 700;
  color: #2c3e50;
  font-size: 14px;
}

/* 水质级别特殊样式 */
.base-info-value.segmentcategory {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}


.info-value {
  font-size: 14px;
  color: #212529;
  padding: 2px 10px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  word-break: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* 企业类型徽章样式 */
/* .type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: fit-content;
  min-height: 32px;
} */

.info-value.industrial {
  background: linear-gradient(90deg, #3498db, #2980b9);
  color: white;
}

.info-value.agricultural {
  background: linear-gradient(90deg, #27ae60, #219653);
  color: white;
}

.info-value.domestic {
  background: linear-gradient(90deg, #9b59b6, #8e44ad);
  color: white;
}

.info-value.industrial-park {
  background: linear-gradient(90deg, #f39c12, #d35400);
  color: white;
}

.info-value.other,
.info-value.unknown {
  background: #95a5a6;
  color: white;
}

/* 企业状态徽章样式 */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: fit-content;
  min-height: 32px;
}

.status-badge.normal {
  background: linear-gradient(90deg, #27ae60, #219653);
  color: white;
}

.status-badge.closed,
.status-badge.cancelled,
.status-badge.revoked {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  color: white;
}

.status-badge.suspended {
  background: linear-gradient(90deg, #f39c12, #d35400);
  color: white;
}

.status-badge.relocated {
  background: linear-gradient(90deg, #9b59b6, #8e44ad);
  color: white;
}

.status-badge.other,
.status-badge.unknown {
  background: #95a5a6;
  color: white;
}

/* 是/否状态样式 */
.status-yes {
  color: #27ae60;
  font-weight: 600;
}

.status-no {
  color: #e74c3c;
  font-weight: 600;
}

.status-unknown {
  color: #95a5a6;
  font-weight: 600;
}

/* 滚动条样式 */
.popup-body::-webkit-scrollbar {
  width: 6px;
}

.popup-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.popup-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.popup-body::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pollution-source-popup {
    min-width: 300px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-item.full-width {
    grid-column: span 1;
  }
}
</style>